<template lang="pug">
    div(id="main",style="height:120%")
</template>
<script>
import echarts from "echarts/lib/echarts";
import "zrender/lib/svg/svg";
import "echarts/lib/chart/bar";
export default {
  name: "rate-chart",
  data() {
    return {
      chart: null
    };
  },
  props: {
    activeIndex: { type: Number, default: null },
    data: { type: Array }, // 一维数组
    max: null,
    min: null
  },
  model: {
    event: "update",
    prop: "data"
  },
  watch: {
    activeIndex() {
      this.updateChart();
    },
    data() {
      this.updateChart();
    }
  },
  methods: {
    updateChart() {
      const vm = this;
      const sorted = [].concat(this.data).sort((a, b) => {
        return b - a;
      });
      this.chart.setOption({
        title: {
          text: ""
        },
        tooltip: {},
        xAxis: {
          data: []
        },
        yAxis: {
          axisLabel: {
            formatter() {
              return "";
            }
          },
          max: this.max || sorted[0],
          min: this.min || 0
        },
        series: [
          {
            name: "销量",
            type: "bar",
            data: this.data,
            z: 0,
            itemStyle: {
              normal: {
                color(params) {
                  if (vm.activeIndex == params.dataIndex) return "#0099ff";
                  return "#333";
                }
              }
            }
          }
        ]
      });
    }
  },
  mounted() {
    setTimeout(
      function() {
        this.chart = echarts.init(document.getElementById("main"), null, {
          renderer: "svg"
        });
        this.updateChart();
      }.bind(this),
      100
    );
  }
};
</script>
<style lang="less">
#main {
  div {
    z-index: 0 !important;
  }
  svg,
  canvas {
    height: 120% !important;
    top:-15px!important;
  }
}
</style>
